<template>
    <div id="map">

    </div>
</template>

<script setup>
import { onMounted } from 'vue'
import { Scene, PointLayer } from '@antv/l7';
import { GaodeMap } from '@antv/l7-maps';
import axios from 'axios';
onMounted(async () => {
    const dataLine = await axios.get('http://39.103.151.139:8000/gis/road_state')
    const datePolygon = await axios.get('http://39.103.151.139:8000/gis/school')
    const dataHot = await axios.get('http://39.103.151.139:8000/gis/wuhan_people')
    const data = await axios.get('https://gw.alipayobjects.com/os/basement_prod/d3564b06-670f-46ea-8edb-842f7010a7c6.json')
    console.log(dataHot.data, 222)
    console.log(data.data, 222)
    const scene = new Scene({
        id: 'map',
        map: new GaodeMap({
            pitch: 60,
            style: 'darkblue',
            center: [114.30, 30.50],
            zoom: 12,
            token: 'dfb26d98b5b3f2ca63eca2a2284366df'
        }),
        // 隐藏logo
        logoVisible: false
    });

    scene.on('loaded', () => {
        const line_layers = new L7.LineLayer({
        })
            .source(dataLine.data)
            .shape('line')
            .size(2)
            .color('#ff2d51')
            .animate({
                trailLength: 1, // 流线长度
                interval: 0.5,  // 实现流线的间隔,分两段执行完流线
                duration: 4      // 每段轨迹执行的时间

            })
        scene.addLayer(line_layers)

        // 热力图
        const layer = new L7.HeatmapLayer()
            .source(data.data)
            .shape('heatmap')
            .size('mag', [0, 1.0]) // weight映射通道
            .style({
                intensity: 2,
                radius: 20,
                rampColors: {
                    colors: ['#FF4818', '#F7B74A', '#FFF598', '#F27DEB', '#8C1EB2', '#421EB2'].reverse(),
                    positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],
                },
            });
        scene.addLayer(layer);

        // 扫光图
        // const polygon_layers = new L7.CityBuildingLayer()
        // polygon_layers
        //     .source(datePolygon.data)
        //     .size('floor', [0, 500])
        //     .color('rgba(242,246,250,1.0)')
        //     .animate({
        //         enable: true,
        //     })
        //     .active({
        //         color: '#0ff',
        //         mix: 0.5,
        //     })
        //     .style({
        //         opacity: 0.7,
        //         baseColor: 'rgb(16, 16, 16)',
        //         windowColor: 'rgb(30, 60, 89)',
        //         brightColor: 'rgb(255, 176, 38)',
        //         sweep: {
        //             enable: true,
        //             sweepRadius: 4,
        //             sweepColor: '#1990FF',
        //             sweepSpeed: 0.5,
        //             sweepCenter: [114.30, 30.50],
        //         },
        //     });
        // scene.addLayer(polygon_layers)
    });
})
</script>


<style scoped lang="scss"></style>
